import { Layout, Menu, Breadcrumb } from 'antd';
import { useState, ReactNode } from 'react';
import { history } from 'umi'
import styles from './index.less'
const { Header, Content, Footer } = Layout;
const { SubMenu } = Menu;

// menuList
const menuList: Array<Object> = [
    {
        menuName: '用户信息',
        path: '/user'
    },
    {
        menuName: '项目列表',
        path: '/project'
    },
    {
        menuName: '前端模块',
        childrenMenu: [
            {
                menuName: 'web'
            },
            {
                menuName: 'M站'
            },
            {
                menuName: 'H5'
            }
        ]
    },
    {
        menuName: '运营中心'
    },
    {
        menuName: '数据大屏'
    }
]

type Props = {
    children: ReactNode,
}

const LayoutPage = ({
    children
}: Props) => {

    // 菜单跳转
    const handleRoute = (path: string) => {
        history.push({
            pathname: path,
            query: {},
        });
    }

    return (
        <>
            <Layout className={styles.layout}>
                <Header className={styles.layout_header}>
                    <div className={styles.layout_header_logo}> 云梯 </div>
                    <Menu theme="light" mode="horizontal" defaultSelectedKeys={['2']}>
                        {menuList.map((item: any, index: number) => {
                            const key = index + 1;
                            // if (item.childrenMenu) {
                            //     return (
                            //         <SubMenu key={key} title={item.menuName}>
                            //             {item.childrenMenu?.map((menu: any, menuIndex: number) => {
                            //                 return <Menu.Item key={menuIndex}>{menu.menuName}</Menu.Item>
                            //             })}
                            //         </SubMenu>
                            //     )
                            // } else {
                            return (
                                <Menu.Item key={key} onClick={() => handleRoute(item.path)}>
                                    {item.menuName}
                                </Menu.Item>
                            )
                            // }
                        })}
                    </Menu>
                </Header>
                <Content style={{ padding: '0 50px', width: '100%', height: '100%' }}>
                    {/* <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>Home</Breadcrumb.Item>
                        <Breadcrumb.Item>List</Breadcrumb.Item>
                        <Breadcrumb.Item>App</Breadcrumb.Item>
                    </Breadcrumb> */}
                    <div className={styles.site_layout_content}>
                        {children}
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>longZhu ©2021 Created by Ali</Footer>
            </Layout>
        </>
    );
};

export default LayoutPage
